import React, { useState, createContext, useReducer } from 'react';
// import { BrowserRouter as Router, Routes, Route, Link, Navigate } from 'react-router-dom';
// import routes from './router';

import { useRoutes } from "react-router-dom";
import routes from "./router/routes";

// import Home from './pages/Home';
import './App.css';
import 'antd/dist/antd.css';

import Provider from '@/store';

// 第三版  将状态管理拆成单独的文件
function App () {
    const element = useRoutes(routes);
    return (
        <Provider>
            {element}
        </Provider>
    );
}


// 第二版  使用context 做状态管理
// const appReducer = (state, action) => {
//     switch (action.type) {
//         // case "FETCH_POSTS":
//         //     return [...state, ...action.payload];
//         // case "NEW_POST":
//         //     return [action.payload, ...state];
//         case "ADD":
//             state.count += 1;
//             return Object.assign({}, state);
//         case "REDUCE":
//             state.count -= 1;
//             return Object.assign({}, state);
//         default:
//             return state;
//     }
// };
// export const AppContext = createContext();
// function App () {
//     const [state, dispatch] = useReducer(appReducer, {count: 1});
//     const element = useRoutes(routes);
//     return (
//         <AppContext.Provider value={[state, dispatch]}>
//             {element}
//         </AppContext.Provider>
//     );
// };

// 第一版： 使用集中式路由
// function App() {
//     // return (
//     //     <div>
//     //         <Router>
//     //             <div className="navBox">
//     //                 {
//     //                     routes.map(route => <Link to={route.path} key={route.path} className="nav" >
//     //                         {route.name}
//     //                     </Link>)
//     //                 }
//     //                 <p>
//     //                     content 区域
//     //                 </p>
//     //             </div>
//     //             <br />
//     //             <Routes>
//     //                 {
//     //                     routes.map(route => {
//     //                         // const compontent = <route.component />;
//     //                         return <Route exact path={route.path} key={route.path} element={<route.component />}>
//     //                         </Route>
//     //                     })
//     //                 }
//     //                 <Route path="*" element={<Navigate to="/" />} />
//     //             </Routes>
//     //         </Router>
//     //     </div>
//     // )
//     const element = useRoutes(routes);
//     return (
//         <>
//             {element}
//         </>
//     );
// };

export default App;
